<template>
  <PageWrapper
    v-loading="loadingRef"
    loading-tip="加载中..."
    title="Loading组件示例"
  >
    <div ref="wrapEl">
      <a-alert message="组件方式" />
      <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
        全屏 Loading
      </a-button>
      <a-button class="my-4" type="primary" @click="openCompAbsolute">
        容器内 Loading
      </a-button>
      <Loading
        :loading="loading"
        :absolute="absolute"
        :theme="theme"
        :background="background"
        :tip="tip"
      />

      <a-alert message="函数方式" />

      <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">
        全屏 Loading
      </a-button>
      <a-button class="my-4" type="primary" @click="openFnWrapLoading">
        容器内 Loading
      </a-button>

      <a-alert message="指令方式" />
      <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
        打开指令Loading
      </a-button>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { useLoading } from "$/components/Loading";
import { Alert } from "ant-design-vue";

export default defineComponent({
  components: { [Alert.name]: Alert },
  setup() {
    const wrapEl = ref<ElRef>(null);

    const loadingRef = ref(false);
    const compState = reactive({
      absolute: false,
      loading: false,
      theme: "dark",
      background: "rgba(111,111,111,.7)",
      tip: "加载中...",
    });
    const [openFullLoading, closeFullLoading] = useLoading({
      tip: "加载中...",
    });

    const [openWrapLoading, closeWrapLoading] = useLoading({
      target: wrapEl,
      props: {
        tip: "加载中...",
        absolute: true,
      },
    });

    function openLoading(absolute: boolean) {
      compState.absolute = absolute;
      compState.loading = true;
      setTimeout(() => {
        compState.loading = false;
      }, 2000);
    }

    function openCompFullLoading() {
      openLoading(false);
    }

    function openCompAbsolute() {
      openLoading(true);
    }

    function openFnFullLoading() {
      openFullLoading();

      setTimeout(() => {
        closeFullLoading();
      }, 2000);
    }

    function openFnWrapLoading() {
      openWrapLoading();

      setTimeout(() => {
        closeWrapLoading();
      }, 2000);
    }

    function openDirectiveLoading() {
      loadingRef.value = true;
      setTimeout(() => {
        loadingRef.value = false;
      }, 2000);
    }

    return {
      openCompFullLoading,
      openFnFullLoading,
      openFnWrapLoading,
      openCompAbsolute,
      wrapEl,
      loadingRef,
      openDirectiveLoading,
      ...toRefs(compState),
    };
  },
});
</script>
